<template>
  <div class="page">
    <div class="topline">
        <div class="titlebox">
            <div class="name">企业网银</div>
            <div class="iconfont icon-xiangshang shang"></div>
            <div class="bankbox">
                <div class="iconfont icon-fangzi"></div>
                中国建设银行首页
            </div>
        </div>
        <div class="callbox">
            客服热线：95533
            <div class="iconfont icon-kehufuwukefu"></div>
            在线客服
        </div>
    </div>
    <div class="titleline">
        <img src="../../assets/img/logo.png" alt="">
        <div class="languagebox">
            <div class="itemguage bold">简体中文</div>
             <div class="itemguage cen">繁体中文</div>
              <div class="itemguage ">English</div>
        </div>
    </div>
    <div class="loginbanner">
        <div class="loginbox">
            <div class="toline">
                <div class="toptitle">证书登录</div>
                <div class="other">手机号/用户名登录</div>
            </div>
            <div class="putbox">
                <div class="iconfont icon-geren21"></div>
                <input type="text" v-model="zhengshu">
                <div class="iconfont icon-xiasanjiao" style="font-size:0.9rem;"></div>
            </div>
                 <div class="putbox" style="justify-content: flex-start;">
                <div class="iconfont icon-jisuanqi"></div>
                <input type="text" v-model="username">
               
            </div>
                 <div class="putbox">
                <div class="iconfont icon-suoding"></div>
                <input type="password" v-model="password">
                <div class="iconfont icon-jianpan"></div>
            </div>
            <div class="loginbtn" @click="login">登录

            </div>
            <div class="labelbox">
                <div>如登录遇到困难，请点击</div>
                <div  class="label">查看指引</div>
                <div class="foget">忘记密码</div>
            </div>
        </div>
        <div class="titlebox">
            <div class="titlename">企业手机银行</div>
            <div class="sanname">扫码下载</div>
            <img src="../../assets/img/erweima.png" alt="">
            <div class="eng">iOS & Android</div>
        </div>
        <div class="tishibox">
            <div class="itemtishi">
                <div class="iconfont icon-helps"></div>
                <div class="tishiname">帮助中心</div>
            </div>
              <div class="itemtishi">
                <div class="iconfont icon-xiazaizhongxin1-copy-copy"></div>
                <div class="tishiname">下载中心</div>
            </div>
              <div class="itemtishi">
                <div class="iconfont icon-24gf-playSquare"></div>
                <div class="tishiname">功能演示</div>
            </div>
        </div>
    </div>

    <div class="banner">
        <div class="bannertitle">
            <div class="iconfont icon-yinliang-F"></div>
            <div class="content">欢迎登录企业银行</div>
        </div>
        <div class="bannerbox">
            <div class="iconfont icon-xiangzuo"></div>
            <div class="itembanner">
                <img src="../../assets/img/u239.png" alt="">
                <div class="bannername">企业金融服务</div>
            </div>
            <div class="itembanner">
                <img src="../../assets/img/u242.png" alt="">
                <div class="bannername">建行全球撮合家</div>
            </div>
               <div class="itembanner">
                <img src="../../assets/img/u245.png" alt="">
                <div class="bannername">在线进销存</div>
            </div>
                 <div class="itembanner">
                <img src="../../assets/img/u248.png" alt="">
                <div class="bannername">薪酬管理</div>
            </div>
            <div class="iconfont icon-xiangyou"></div>
        </div>
    </div> 
    <div class="bodycontent">
        <div class="line">
            <div class="itemline">
                <div class="iconfont icon-xiasanjiao"></div>
            </div>
            <div class="itemline"></div>
            <div class="itemline"></div>
            <div class="itemline"></div>
        </div>
        <div class="content">
            <div class="contentleft">
                <div class="title">企业金融服务</div>
                <div class="txt">为企业客户提供账户查询、转账、代发代扣、投资理财、信贷融资等服务，充分满足企业客户提高财务操作效率、加强财务管理、集中资金运作的需求。</div>
            </div>
            <div class="contentright">
                <div class="itemcontent">
                    <div class="name">账户查询</div>
                    <div class="txt">
                        <div>账户信息查询</div>
                        <div>电子回单查询</div>
                        <div>电子对账</div>
                        <div>经营分析</div>
                        <div>明细清单</div>
                    </div>
                </div>
                <div class="itemcontent">
                    <div class="name">转账汇款</div>
                    <div class="txt">
                        <div>单笔付款</div>
                        <div>批量转账</div>
                        <div>跨行实时转账</div>
                        <div>流水查询</div>
                        <div>交易限额查询</div>
                    </div>
                </div>
                <div class="itemcontent">
                    <div class="name">代发代扣</div>
                    <div class="txt">
                        <div>代发</div>
                        <div>代扣</div>
                        <div>限额查询</div>
                        <div>代收业务授权</div>
                        <div>电子工资单</div>
                    </div>
                </div>
                <div class="itemcontent">
                    <div class="name">现金管理</div>
                    <div class="txt">
                        <div>信息报告</div>
                        <div>集团首付款</div>
                        <div>监管易</div>
                        <div>周期支付限额</div>
                        <div>账簿通</div>
                    </div>
                </div>
                <div class="itemcontent">
                    <div class="name">缴费业务</div>
                    <div class="txt">
                        <div>电子银行费用缴交</div>
                        <div>代缴费</div>
                        <div>套餐费用缴交</div>
                        <div>财税库行</div>
                        <div>财关库银</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

  </div>
</template>

<script>
export default {
    data(){
        return{
          zhengshu:'',
          username:'',
          password:'',
        }
    },
 /**
  * 
  */
 methods:{
    login(){
       if(this.zhengshu==''){
        this.$message('请选择证书');
        return
       }
           if(this.username==''){
        this.$message('请输入用户名');
        return
       }
           if(this.password==''){
        this.$message('请输入密码');
        return
       }
        this.$router.push('/getMenuInfo')
    }
 }
}
</script>

<style lang='less' scopde>
  .page{
    width: 100%;
    .topline{
        width: 100%;
       box-sizing: border-box;
       padding: .8276rem 0;
        background: #0066B3;
        color: #27FFF7;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
         font-size: .9506rem;
         font-weight: 300;
        .titlebox{
             display: flex;
        align-items: center;
        position: relative;
       width: 30%;
        .bankbox{
            display: flex;
            align-items: center;
            .iconfont {
                color: #27FFF7;
                margin: 0 .6505rem;

            }
        }
        
        .name{
             color: white;
             margin-right: .469rem;
            
        }
        .shang{
           color: white;
           bottom: -1.1rem;
           left: 1.2rem;
            position: absolute;
        }
        }
        .callbox{
           
              display: flex;
        align-items: center;
        .iconfont{
            margin:0 .6567rem;
            color: rgb(211, 211, 211);
        }
        }
    }
    .titleline{
        width: 100%;
        height: 5rem;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding-top: 1rem;
        padding-bottom: 1.8rem;
        img{
            width: 22rem;
            height: 2.6rem;
            margin-left: -4rem;
        }
        .languagebox{
            display: flex;
            align-items: center;
            font-size: 0.8rem;
            margin-top: 3rem;
            .itemguage{
                color: gray;
                padding: 0 0.2rem;
                height: 0.8rem;
                line-height: 0.8rem;
                margin: 0 .1876rem;
            }
            .bold{
                color: black;
            }
            .cen{
             border-left:2px solid gray ;
             border-right: 2px solid gray;
            }

        }
    }
    .loginbanner{
        width: 100%;
        height: 24rem;
        background-image: url('../../assets/img/登录.JPG');
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 0.5rem 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
       
        .loginbox{
            width: 19rem;
            height: 100%;
            border-radius: 1rem;
            box-sizing: border-box;
            padding: 1rem  0.7rem 0.5rem 0.7rem;
            background: white;
            .toline{
             width: 100%;
             display: flex;
             align-items: center;
             justify-content: space-between;
             .toptitle{
                font-size: 1.4rem;
                font-weight: bold;
                color: #666666;
             }
             .other{
                color: #5996C0;
             }
            }
            .putbox{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border: .0178rem solid gray;
                border-radius: 0.25rem;
                height: 2.1rem;
                line-height: 2.1rem;
                margin-top: 2rem;
                box-sizing: border-box;
                padding: 0.1rem 0.3rem;
                .iconfont{
                    font-size: 1.5rem;
                    color: gray;
                }
                input{
                    border: none;
                    outline: none;
                    font-size: 1.2rem;
                    width: 80%;

                }
                .icon-xiasanjiao{
                    color: #67B3E9;
                }


            }
            .loginbtn{
                width: 100%;
                margin-top: 1.4rem;
                border-radius: 0.2rem;
                color: white;
                height: 2rem;
                line-height: 2rem;
                text-align: center;
                background: #109CD9;
                cursor: pointer;
            }
            .labelbox{
            width: 100%;
            display: flex;
            align-items: center;
            
            margin-top: 1rem;
            font-size: 0.82rem;
            .label{
                color: #109CD9;
            }
            .foget{
                color: #109CD9;
                margin-left: 0.4rem;
            }
            }
          
        }
        .titlebox{
            width: 6rem;
            background: white;
            margin: 2rem 17rem auto 0.8rem;
            border-radius: 0.7rem;
            box-shadow: 0 0.25rem  0 #109CD9;
            .titlename{
                background: #109CD9;
                color: white;
                font-size: 0.8rem;
                text-align: center;
                border-top-left-radius: 0.7rem;
                border-top-right-radius: 0.7rem;
            }
            .sanname{
                padding: 0.5rem 0;
                text-align: center;
                font-size: 0.8rem;
               
            }
            img{
                 margin:0 0.1rem !important;
                width: 5.6rem;
                height: 5.6rem;
               
            }
            .eng{
                font-size: 0.7rem;
                text-align: center;
                padding-bottom: 0.2rem ;
            }
        }
        .tishibox{
            width: 5rem;
            background: white;
            box-sizing: border-box;
            height: 16rem;
            border-top-left-radius: 0.7rem;
            border-bottom-left-radius: 0.7rem;
             display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
        .itemtishi{
            margin: auto;
            text-align: center;
           
            .iconfont{
                color: #61BAE6;
                font-size: 2rem;
            }
            .tishiname{
                font-size: 0.7rem;
            }
        }
          

        }

    }
    .banner{
       width: 66%;
       margin: auto;
       background: white;
          box-sizing: border-box;
       .bannertitle{
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.3rem 0;
        border-bottom: 1px solid #c1c1c1;
           box-sizing: border-box;
        .iconfont{
            color: #F7AA1D;
            margin-right: 0.5rem;

        }
        .content{
            font-size: 0.85rem;
            color: gray;
        }
       }
       .bannerbox{
        width: 100%;
         
        box-sizing: border-box;
        padding: 0 2rem;
        height: 12rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .iconfont{
            font-size: 2rem;
            color: gray;
        }
        .itembanner{
            img{
            margin: auto;
        }
        text-align: center;
        }
        
        
       }
    }
    .bodycontent{
        width: 66%;
        margin: auto;
        .line{
            width: 100%;
            height: 1px ;
            background: #0066B3;
            z-index: 999;
            .itemline{
                width: 25%;
                height: .0657rem;
                background: #109CD9;
                .iconfont{
                    color: #109CD9;
                    text-align: center;
                }
            }
        }
        .content{
            width: 100%;
            height: 20rem;
            display: flex;
            align-items: center;
            z-index: 1;
            margin-top: .7505rem;
            .contentleft{
                width: 25%;
                height: 100%;
                background-image: url('../../assets/img/u179.png');
                background-size: 100% 100%;
                box-sizing: border-box;
                padding: 2rem 1rem;
                .title{
                    font-size: 1.2rem;
                }
                .txt{
                    color: #3b3b3b;
                    margin-top: 1rem;
                    font-size: 1.11rem;
                }
            }
            .contentright{
                width: 75%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content:space-between;
                .itemcontent{
                    width: 20%;
                    height: 100%;
                    box-sizing: border-box;
                    padding: 1rem  3rem;
                    .name{
                        font-size: 1.2rem;
                        color: #3b3b3b;
                        width: 100%;
                        padding: 1rem 0.3rem 1rem 0.3rem;
                        border-bottom: 2px solid #dddddd;
                    }
                    .txt{
                        line-height: 2;
                        color: gray;
                        margin-top: 2rem;
                        font-size: 0.9rem;
                    }
                    
                }
            }

}
    }
  }
</style>